<template>
  <div class="followForm">
    <tmpHeader :index='13' />
    <div class="ibanner_header">
       <Button type="info" @click='addForm'>
          <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
      </Button>
        <div class="box">
            <div class="header_input">
            <Input
                v-model.trim="val"
                placeholder="请输入名称检索"
                style="width: 200px;margin-right:10px;"
                clearable
            />
            </div>
            <Button type="primary" icon="ios-search" @click="search(1)"></Button>
        </div>
    </div>  
    <Table stripe :columns="columns1" :data="data1" style="margin:10px 0;"></Table>
    <div class="page">
        <Page :total="count" :current='pageNo' :page-size='pageSize' show-total show-elevator @on-change="pageChange"/>
    </div>
  </div>
</template>
<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader
  },
  data() {
    return {
      modalStatus: false,
      modalTitle:"添加表单",
      pageNo: 1,
      pageSize: 10,
      count: 10,
      val: '',
      id: sessionStorage.getItem("hospitalId"),
      columns1: [
          {
            title:"排序",
            key:"isum",
            align:"center",
            render: (h, params) => {
                let isum = (this.pageNo-1)*this.pageSize + params.index +1;
                return h("span", isum);
            }
          },
          {
            title:"表单类型",
            key:'formTypeName',
            align:"center",
          },
          {
            title:"表单名称",
            key:'formName',
            align:"center",
          },
          {
            title:"题库量",
            key:'qnum',
            align:"center",
          },
          {
            title:"适用科室",
            key:'deptName',
            align:"center",
          },
          {
            title:"创建人",
            key:'userName',
            align:"center",
          },
          {
            title:"创建时间",
            key:'createTime',
            align:"center",
          },
          {
            title:"设置",
            align:"center",
            render: (h, params) => {
                let row = params.row;
                return [
                    h(
                        'a',{
                            on: {
                                click: () => {
                                    this.edit(row)
                                }
                            }
                    }, 
                    '编辑'),
                ]
            }
        }
      ],
      data1: [],
      followList:[]
    };
  },
  created() {
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/followForm/index",
        title: "随访表单"
      }
    ];
    this.$emit("changeBreadList", breadList);    
  },
  mounted() {
    this.searchFormType();
    this.loadingFollow(1)
  },
  methods: {
    edit(row){
      console.log(row)
      let params = {
          id : row.id,
      }
      this.functionJS.paramsNavgationTo(this, "followFormEdit",
          // 公用方法
          params
      ); 
    },
    addForm () {
      // 公用方法
        this.functionJS.paramsNavgationTo(this, "followFormAdd"); 
    },
    pageChange (index) {
        this.loadingFollow(index)
    },
    search() {
      this.pageNo = 1
      this.loadingFollow(1)
    },
    // 查询所有表单数据
    loadingFollow(pageNo) {
        this.formId = this.$route.query.id || null
        this.pageNo = pageNo
        let url = api.formPageList;
        let params = {
            pageNo,
            pageSize: this.pageSize,
            hospitalId: this.id,
        };
        if(this.val && this.val != '' ){
            params.searchKey = this.val
        }
        this.$axios.post(url,params).then(res => {
            if(res.data.success) {
                let ret = res.data.object;
                this.count = ret.total;
                if(ret.records){
                  ret.records.forEach((item, index) => {
                      item.isum = this.addZeros(index)
                      if(item.pattern ==1) {
                          item.formTypeName = "家医随访"
                      } else if(item.pattern ==2) {
                          item.formTypeName = "健康宣教"
                      } else if(item.pattern ==3) {
                          item.formTypeName = "院后随访表单"
                      } else if(item.pattern ==4) {
                          item.formTypeName = "临床后随访"
                      } else if(item.pattern ==5) {
                          item.formTypeName = "药学回访"
                      }
                      // this.followList.forEach(is => {
                      //     if (item.pattern ==is.id) {
                      //         item.formTypeName = is.name
                      //     }
                      // })
                  })
                  this.data1 = ret.records;
                } else {
                  this.data1 = []
                }               
            } else {
                // this.$Message.error("加载随访表单列表失败!")
            }
        })
    },
    // 查询所有随访表单类型
    searchFormType() {
        let url = api.findSelection
        this.$axios.post(url,{}).then(res => {
            if(res.data.success) {
                let ret = res.data.object;
                this.followList = ret
                console.log("表单类型",ret);
            } else {
                this.$Message.error("加载关联表单失败")
            }
        })
    }
  }
};
</script>
<style lang="less" scoped>
.followForm {
  width: 98%;
  padding: 10px 30px;
  margin: 0 auto;
  background: #fff;
  .ibanner_header {
      width: 100%;
      margin: 20px auto;
      display: flex;
      .box {
        display: flex;
        flex-direction: row;
        margin-left: 10px;
      }
    }
  .page{
      text-align: center;
      margin: 20px 0;
    }
}
</style>
